<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>日历饼图</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body style="height: 100%; margin: 0">
	<div id="main" style="height: 100%"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

const cellSize = [80, 80];
const pieRadius = 30;
function getVirtualData() {
	const date = +echarts.time.parse('2017-02-01');
	const end = +echarts.time.parse('2017-03-01');
	const dayTime = 3600 * 24 * 1000;
	const data = [];
	for (let time = date; time < end; time += dayTime) {
		data.push([
			echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
			Math.floor(Math.random() * 10000)
		]);
	}
	return data;
}
const scatterData = getVirtualData();
const pieSeries = scatterData.map(function (item, index) {
	return {
		type: 'pie',
		// id: 'pie-' + index,
		id: item[0],
		center: item[0],
		radius: pieRadius,
		coordinateSystem: 'calendar',
		label: {
			formatter: '{c}',
			position: 'inside'
		},
		data: [
			{ name: 'Work', value: Math.round(Math.random() * 24) },
			{ name: 'Entertainment', value: Math.round(Math.random() * 24) },
			{ name: 'Sleep', value: Math.round(Math.random() * 24) }
		]
	};
});
console.log(scatterData);
console.log(pieSeries);

// 指定图表的配置项和数据
var option = {
	tooltip: {},
	legend: {
		data: ['Work', 'Entertainment', 'Sleep'],
		top: 20
	},
	calendar: {
		top: 'middle',
		left: 'center',
		orient: 'vertical',
		cellSize: cellSize,
		yearLabel: {
			show: true,
			margin: 50,
			fontSize: 30
		},
		dayLabel: {
			margin: 20,
			firstDay: 1,
		},
		monthLabel: {
			// show: false
		},
		range: ['2017-02']
	},
	series: [
		{
			id: 'label',
			type: 'scatter',
			coordinateSystem: 'calendar',
			symbolSize: 0,
			label: {
				show: true,
				formatter: function (params) {
					return echarts.time.format(params.value[0], '{dd}', false);
				},
				offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
				fontSize: 14
			},
			data: scatterData
		},
		...pieSeries
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
	console.log(params);
	// console.log(params.data);
});
</script>
</html>
